<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/shijiu.css" />
		<link rel="stylesheet" href="css/swiper-3.4.2.min.css" />
<script type="text/javascript" src="../Resources/flexible.debug.js" ></script>
<script type="text/javascript" src="../Resources/swiper/swiper-3.4.2.jquery.min.js" ></script>
<script type="text/javascript" src="../Resources/jquery.js"></script>
<script type="text/javascript" src="../Resources/swiper/swiper.min.js" ></script>
	</head>
	<body>
	   <header class="head">
	   	<span><img src="imgs/images/xuan_06.png"/></span>
	   	<span>秀吧</span>
	   	<span><img src="imgs/images/xuan_03.png"/></span>
	   </header>
	   
	   
	   <div class="swiper-container a">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide">
			        	<div class="tabs">
								<a href="#" class="active">最新上传</a>
								<a href="#">小编点评</a>
								<a href="#">一周最热</a>
								<a href="#">最近评论</a>
		                </div>
			        </div>
			        
			    </div>
	   
	   
	   
	   
	   <div id="tabs-container" class="swiper-container swiper-container-horizontal">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-slide-active" style="width: 375px;">
        <div class="content-slide">
        <ul>
        	<li><img src="imgs/images/xuan_10.png"/></li>
        	<li><img src="imgs/images/xuan_12.png"/></li>
        	<li><img src="imgs/images/xuan_14.png"/></li>
        	<li><img src="imgs/images/xuan_18.png"/></li>
        	<li><img src="imgs/images/xuan_19.png"/></li>
            <li><img src="imgs/images/xuan_20.png"/></li>
            <li><img src="imgs/images/xuan_23.png"/></li>
            <li><img src="imgs/images/xuan_24.png"/></li>
            <li><img src="imgs/images/xuan_25.png"/></li>
        </ul>
        
        
        
        </div>
      </div>
      <div class="swiper-slide swiper-slide-next" style="width: 375px;">
        <div class="content-slide">
         <ul>
         	<li><img src="imgs/images/xuan_10.png"/></li>
        	<li><img src="imgs/images/xuan_12.png"/></li>
        	<li><img src="imgs/images/xuan_14.png"/></li>
        	<li><img src="imgs/images/xuan_18.png"/></li>
        	<li><img src="imgs/images/xuan_19.png"/></li>
            <li><img src="imgs/images/xuan_20.png"/></li>
            <li><img src="imgs/images/xuan_23.png"/></li>
            <li><img src="imgs/images/xuan_24.png"/></li>
            <li><img src="imgs/images/xuan_25.png"/></li>
         </ul>
         
         

        </div>
      </div>
       <div class="swiper-slide swiper-slide-next" style="width: 375px;">
        <div class="content-slide">
         <ul>
         	<li><img src="imgs/images/xuan_10.png"/></li>
        	<li><img src="imgs/images/xuan_12.png"/></li>
        	<li><img src="imgs/images/xuan_14.png"/></li>
        	<li><img src="imgs/images/xuan_18.png"/></li>
        	<li><img src="imgs/images/xuan_19.png"/></li>
            <li><img src="imgs/images/xuan_20.png"/></li>
            <li><img src="imgs/images/xuan_23.png"/></li>
            <li><img src="imgs/images/xuan_24.png"/></li>
            <li><img src="imgs/images/xuan_25.png"/></li>
         </ul>
         
         

        </div>
      </div>
       <div class="swiper-slide swiper-slide-next" style="width: 375px;">
        <div class="content-slide">
        <ul>
        	<li><img src="imgs/images/xuan_10.png"/></li>
        	<li><img src="imgs/images/xuan_12.png"/></li>
        	<li><img src="imgs/images/xuan_14.png"/></li>
        	<li><img src="imgs/images/xuan_18.png"/></li>
        	<li><img src="imgs/images/xuan_19.png"/></li>
            <li><img src="imgs/images/xuan_20.png"/></li>
            <li><img src="imgs/images/xuan_23.png"/></li>
            <li><img src="imgs/images/xuan_24.png"/></li>
            <li><img src="imgs/images/xuan_25.png"/></li>
        </ul>
        
        

        </div>
      </div>
    </div>
  </div>
	   
	   
	   
	   
	   
	    <footer class="ter">
	    	<dl>
	    		<dt><img src="imgs/images/xiu，_21.png"/></dt>
	    		<dd>上传照片</dd>
	    	</dl>
	    </footer>
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   <script>
	   
	   window.onload = function() {
//var mySwiper1 = new Swiper('#header',{
//	  freeMode : true,
//	  slidesPerView : 'auto',
//	  freeModeSticky : true ,
//});
//var mySwiper2 = new Swiper('#banner',{
//	  autoplay:5000,
//	  visibilityFullFit : true,
//	  loop:true,
//	  pagination : '.pagination',
//});
//
  var tabsSwiper = new Swiper('#tabs-container',{
    speed:500,
    onSlideChangeStart: function(){
      $(".tabs .active").removeClass('active')
      $(".tabs a").eq(tabsSwiper.activeIndex).addClass('active')  
    }
  })
  $(".tabs a").on('touchstart mousedown',function(e){
    e.preventDefault()
    $(".tabs .active").removeClass('active')
    $(this).addClass('active')
    tabsSwiper.slideTo( $(this).index() )
  })
  $(".tabs a").click(function(e){
    e.preventDefault()
  })
  
}
	   
	   
	   
	   
	   	var mySwiper = new Swiper ('.a', {
//		  	autoplay:2000,
		  	keyboardControl:true,
		    loop: true,
		    paginationClickale:true,
		    nextButton: '.swiper-button-next',
		    prevButton: '.swiper-button-prev',
		  })   
	   </script>
	</body>
</html>
